<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">备案信息标题</label>
        <el-input
          v-model="query.name"
          clearable
          placeholder="备案信息标题"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <!-- <label class="el-form-item-label">类型</label>
        <el-input
          v-model="query.type"
          clearable
          placeholder="类型"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        /> -->
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        @open="openEditor"
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="80%"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="备案信息标题" prop="name">
            <el-input v-model="form.name" style="width: 370px" />
          </el-form-item>
          <el-form-item label="备案信息封面" prop="imageUrl">
            <el-upload
              ref="upload"
              :action="baseUrl +'/api/localStorage/pictures'"
              :headers="authHeader"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleImgUploadSuccess"
              :on-remove="handleRemove"
              :show-file-list="false"
            >
              <img
                v-if="form.imageUrl"
                :src="imageUrl"
                width="100%"
                height="100%"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog> -->
          </el-form-item>
          <el-form-item label="备案信息内容" prop="content" class="content">
            <Editor
              ref="editor"
              style="width: 160%"
              v-model="form.content"
              @onChange="onChange"
            />
          </el-form-item>
          <!-- <el-form-item label="图片地址" prop="imageUrl">
            <el-input v-model="form.imageUrl" style="width: 370px;" />
          </el-form-item> -->
          <!-- <el-form-item label="类型" prop="type">
            未设置字典，请手动设置 Select
          </el-form-item> -->
          <el-form-item label="排序" prop="order">
            <el-input v-model="form.order" style="width: 370px" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="备案信息标题" />
        <el-table-column prop="content" label="备案信息内容" :show-overflow-tooltip="true" >
         <template slot-scope="scope">
            <div v-html="scope.row.content" class="contentDiv"></div>
          </template>
        </el-table-column>
        <el-table-column prop="imageUrl" label="图片地址" />
        <!-- <el-table-column prop="type" label="类型" /> -->
        <el-table-column
          v-if="checkPer(['admin', 'announcement:edit', 'announcement:del'])"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudAnnouncement from "@/api/announcement";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import { upload } from "@/utils/upload";
import { mapGetters } from "vuex";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import Editor from "../../components/Editor.vue";
import { getToken } from "@/utils/auth";

const defaultForm = {
  id: null,
  name: null,
  content: null,
  imageUrl: null,
  type: 5,
  order: null,
  createdAt: null,
  updatedAt: null,
  isDeleted: null
};
export default {
  name: "AnnouncementRecord",
  components: { pagination, crudOperation, rrOperation, udOperation, Editor },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: "备案信息",
      url: "api/announcement",
      idField: "id",
      sort: "id,desc",
      crudMethod: { ...crudAnnouncement },
      query: {
        type: 5
      }
    });
  },
  data() {
    return {
      imageUrl: "",
      url: "",
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      permission: {
        add: ["admin", "announcement:add"],
        edit: ["admin", "announcement:edit"],
        del: ["admin", "announcement:del"]
      },
      rules: {
        name: [
          { required: true, message: "备案信息标题不能为空", trigger: "blur" }
        ],
        content: [
          { required: true, message: "备案信息内容不能为空", trigger: "blur" }
        ],
        imageUrl: [
          { required: true, message: "备案信息封面不能为空", trigger: "blur" }
        ],
        type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        order: [{ required: true, message: "排序不能为空", trigger: "blur" }]
      },
      queryTypeOptions: [
        { key: "name", display_name: "备案信息标题" },
        { key: "type", display_name: "类型" }
      ]
    };
  },
  computed: {
    ...mapGetters(["baseApi"]),
    authHeader() {
      return { Authorization: getToken() };
    }
  },
  methods: {
    openEditor() {
      this.$nextTick(() => {
        this.$refs.editor.setText(this.form.content);
        if (this.form.imageUrl == null) {
          // 新增
          this.imageUrl = null;
        } else {
          this.imageUrl = this.baseUrl+this.form.imageUrl.slice(4);
        }
      });
    },
    onChange(value) {
      this.form.content = value
      // this.form.content = this.$refs.editor.getText();
    },

    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据

    // onchange(content) {
    //   this.form.content = content
    // },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleImgUploadSuccess(response, file) {
      {
        this.form.imageUrl = response.path;
        this.imageUrl = URL.createObjectURL(file.raw);
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/content.scss';
</style>
